<template lang="pug">
  router-link(to='/personal/course_card/record').course-card
    div.title {{card.name}}
        span.price 金额 ￥{{card.price|priceFilter}}
    div.content
        div.item(v-for="item in card.items")
            span {{item.name}}
            span.times
                span {{item.surplus}}
                span /{{item.count}}
        
</template>
<script>
export default {
  props: ["card"],
  filters: {
    priceFilter(price) {
      return (price / 100).toFixed(2);
    }
  }
};
</script>

<style lang="stylus" scoped>
.course-card {
    display: block;
    background-color: #fff;
    font-size: 0.3rem;
    line-height: 0.5rem;

    >.title {
        padding: 0.2rem 0.3rem 0.1rem 0.3rem;
        font-weight: bold;
        border-bottom: solid 1px #eee;

        .price {
            margin-left: 0.3rem;
            color: #ccc;
        }
    }

    .content {
        .item {
            padding: 0.1rem;
            margin-left: 1rem;
            border-bottom: solid 1px #eee;
            display: flex;
            justify-content: space-between;

            &:last-child {
                border-bottom: none;
            }

            .times {
                span:first-child {
                    color: #ac0e0e;
                }
            }
        }
    }
}
</style>
